/*初始化css*/
/*这种注释会编译到css中去*/
//这种注释不会编译到css中去
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#wrap {
  position: relative;
  width: 3.75rem;
  height: 5rem;
  margin: 0 auto;
  border: 1px pink solid;

  .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    margin: auto;
    background-color: aqua;

    &:hover {
      background: pink
    }

    /*嵌套规则，希望:hover在inner不是平级关系，而是连在一起*/
  }
}

//混合
@import "./triangle.less";
#sjx {
  //匹配模式注释掉了，手动引用
  .triangle;
  .triangle(B, @c:#af0be3);

  //此处演示的less的继承，实现代码的复用
  &:hover:extend(.triangle) {
    .triangle(R, @c:#a41030);
  }
}


